<template>
    <div>

        <div style="overflow:hidden;margin-bottom:20px">

            <span style="float:left;font-weight: bolder;color:#666;margin-left:10px">栏目名称</span>
            <span style="float:right;font-weight: bolder;color:#666;margin-right:130px">操作</span>
            <span style="float: right; margin-right: 280px">
                                <span style="display:inline-block;width:200px;text-align: center">最后更新时间</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span style="display:inline-block;width:200px;" >最后操作人</span>
                            </span>
        </div>

        <el-tree
                :data="data2"
                :props="defaultProps"
                node-key="id"
                default-expand-all
                :expand-on-click-node="false"
                :render-content="renderContent">
        </el-tree>
        <el-dialog title="修改栏目名称" :visible.sync="dialog.changeName.open" v-if="dialog.changeName.open" :modal="false" size="tiny">
            <template>
                <el-input v-model="name"></el-input>
                <el-button type="primary" size="small" style="margin-top:20px" @click="sureName">确定</el-button>
            </template>
        </el-dialog>
        <el-dialog title="增加子栏目" :visible.sync="dialog.addField.open" v-if="dialog.addField.open" :modal="false" size="tiny">
            <template>
                <el-input v-model="input" placeholder="请输入子栏目名称"></el-input>
                <el-button type="primary" size="small" style="margin-top:20px" @click="sureBtn">确定</el-button>
            </template>
        </el-dialog>
        <el-dialog title="增加栏目" :visible.sync="dialog.showHistory.open" v-if="dialog.showHistory.open" :modal="false" size="tiny">
            <template>
                <el-input v-model="inp" placeholder="请输入栏目名称"></el-input>
                <el-button type="primary" size="small" style="margin-top:20px" @click="addO">确定</el-button>
            </template>
        </el-dialog>
        <div style="margin-left:90%;margin-top:10px;margin-bottom:20px"><el-button type="primary" style="margin-top:20px" @click="addOne">新增栏目</el-button></div>
    </div>
</template>
<script>
    import _http from '@/components/common/http.vue'
    import _param from '@/components/common/param.vue'
    let id = 1000;
    export default {
        data() {
            return {
                name:'',
                userid:'',
                input:'',
                inp:'',
                store:'',
                data:'',
                dialog:{
                    addField:{
                        open:false
                    },
                    showHistory:{
                        open:false
                    },
                    changeName:{
                        open:false
                    }
                },
                apiPort:{
///                    列表页内容接口
                    fileManageList:"filemanage/fileManageList",
                    del:'filemanage/deleteFileManage',
                    add:'filemanage/addFileManage',
                    edit:'filemanage/editFileManage'
                },
                data2:[],
                defaultProps: {
                    children: 'subFileManage',
                    label: 'name'
                }
            }
        },
        mounted(){
            this.userid=localStorage.getItem('userId')
            console.log(this.userid)
//            this.form.userid = localStorage.getItem('userId')
            this.getList()
        },
        methods: {
            sureName(){
                this.dialog.changeName.open = false
                var that = this
                var param = {userid:this.userid,id:this.data.id,name:this.name}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.edit,params,(res)=>{
                    console.log(res)
                if(res.data.code==100){
                    that.getList()
                }
            })
            },
            changNa(node,store,data){
//                this.openDialog('changeName')
                this.store = store
                this.data = data
                this.name=node.label
                this.dialog.changeName.open = true
            },
            addOne(){
                this.openDialog('showHistory')
            },
            addO(){
                if(this.inp!=''){
                    this.dialog.showHistory.open = false
                    var that = this
                    var param = {userid:this.userid,name:this.inp,parentid:0}
                    var params = that.querystring.stringify(param)
                    _http.axiosRequest(that,that.apiPort.add,params,(res)=>{
                        if(res.data.code==100){
                        that.getList()
                    }
                })
//                    this.store.append({ id: id++, label:this.input , children: [] }, this.data);
                }else{
                    this.dialog.showHistory.open = false
                }
            },
            getList(){
                var that = this
                var param = {userid:this.userid}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.fileManageList,params,(res)=>{
                    console.log(res.data.data)
                this.data2 = res.data.data
            })
            },
            openDialog(dialog){
                this.dialog[dialog].open = true
            },
            closeDialog(dialog){
                this.dialog[dialog].open = false
            },
            showDio(store,data){
                this.input=''
                this.store = store
                this.data = data
                this.dialog.addField.open = true
            },
            sureBtn(){
                if(this.input!=''){
                    this.dialog.addField.open = false
                    var that = this
//                    alert(this.data.id)
                    var param = {userid:this.userid,parentid:this.data.id,name:this.input}
                    var params = that.querystring.stringify(param)
                    _http.axiosRequest(that,that.apiPort.add,params,(res)=>{
                        console.log(res)
                        if(res.data.code==100){
                        that.getList()
                    }

                })

//                    this.store.append({ id: id++, label:this.input , children: [] }, this.data);
                }else{
                    this.dialog.addField.open = false
                }
            },
//            append(store, data) {
//                store.append({ id: id++, label:'' , children: [] }, data);
//            },
            remove(store, data) {
                var that = this
                var param = {userid:this.userid,id:data.id}
                var params = that.querystring.stringify(param)
                _http.axiosRequest(that,that.apiPort.del,params,(res)=>{
                   if(res.data.code==100){
                    that.getList()
                }else{
                    that.$message({
                        message:res.data.msg,
                        type: 'warning'
                    });
                }
            })
//                store.remove(data);
                console.log(store.data)
            },
            renderContent(h, { node, data, store }) {
                return (
                        <span>
                            <span>
                                <span>{node.label}</span>
                            </span>
                            <span style="float: right; margin-right: 20px">
                                <el-button size="small" on-click={ () => this.changNa(node,store,data) }>修改名称</el-button>
                                <el-button size="small" on-click={ () => this.showDio(store,data) }>添加子目录</el-button>
                                <el-button size="small" on-click={ () => this.remove(store, data) }>删除</el-button>
                            </span>
                            <span style="float: right; margin-right: 200px">
                                <span style="display:inline-block;width:200px">{data.update_time}</span>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <span style="display:inline-block;width:200px">{data.operator}</span>
                            </span>
                        </span>);
            }
        }
    };
</script>